﻿@using HrEFCore;
@model EMR
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>My JSP 'index.jsp' starting page</title>
    <!-- 引入样式 -->
    <script src="~/aa/element-ui/lib/index.js"></script>
    <!-- 引入组件库 -->
    <link href="~/aa/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/aa/jquery-3.4.1.js"></script>
    <script src="~/aa/jquery.validate.js"></script>
    <script src="~/aa/jquery.validate.unobtrusive.js"></script>
    <script src="~/aa/vue/dist/vue.js"></script>
    <script src="~/aa/element-ui/lib/index.js"></script>
    <link href="~/aa/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/aa/axios/dist/axios.js"></script>
    <link rel="stylesheet" href="~/css/table.css" type="text/css">
    <script type="text/javascript" src="~/javascript/comm/comm.js"></script>
    <script type="text/javascript" src="~/javascript/jquery-1.7.2.js"></script>
    <!-- 引入样式 -->
    <link href="~/aa/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
    <style type="text/css">
        body {
            background: rgb(253,244,227);
        }

        .TD_STYLE1 {
            background: #E6DDCE;
            /* color:white; */
        }

        .TD_STYLE2 {
            background: rgb(253,244,227);
        }

        .INPUT_STYLE2 {
            background: rgb(253,244,227);
        }

        .TEXTAREA_STYLE1{
            background: rgb(253,244,227);
        }
    </style>
</head>
<body>
    <form action="/EMR/Add" method="post" id="emrAdd">
        <table style="width: 100%;">
            <tr>
                <td>
                    <font color="black">您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布登记 </font>
                </td>
            </tr>
            <tr>
                <td style="float:right;margin-bottom:10px;margin-right:20px">
                    <input type="button" value="提交" class="BUTTON_STYLE1" onclick="validateForm()" />
                    <input type="reset" value="清除" class="BUTTON_STYLE1" />
                </td>
            </tr>
        </table>
        <table width="100%" border="1" cellpadding=3 cellspacing=1
               bordercolorlight=#848284 bordercolordark=#eeeeee
               class="TABLE_STYLE1 table-bordered">
            <tr>
                <td class="TD_STYLE1" width="11%">
                    @Html.LabelFor(e=>e.FirstKindId)
                </td>
                <td width="20%" class="TD_STYLE2">
                    <el-cascader :options="options" v-model="value" v-on:change="handleChange"></el-cascader>
                    <input type="text" style="display:none" v-model="firstid" name="FirstKindId" />
                    <input type="text" style="display:none" v-model="secondid" name="SecondKindId" />
                    <input type="text" style="display:none" v-model="thirdid" name="ThirdKindId" />
                    <span id="FirstKindIdError" style="color:red;display:none">请选择职位分类</span>
                </td>
            </tr>
            <tr>
                <td style="width: 11%;" class="TD_STYLE1">
                    @* 招聘类型 *@
                    @Html.LabelFor(e=>e.EngageType)
                </td>
                <td class="TD_STYLE2" colspan="2">
                    <select name="EngageType" id="EngageType" style=" background: rgb(253,244,227);" class="form-control">
                        <option value="">--请选择--</option>
                        <option value="校园招聘">校园招聘</option>
                        <option value="社会招聘">社会招聘</option>
                    </select>
                    <span id="EngageTypeError" style="color:red;display:none">请选择招聘类型</span>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    职位分类
                </td>
                <td class="TD_STYLE2">
                    @Html.DropDownListFor(e=>e.MajorKindId,ViewBag.cmk as IEnumerable<SelectListItem>,new{@class="form-control"})
                    <span id="MajorKindIdError" style="color:red;display:none">请选择职位分类</span>
                </td>
                <td class="TD_STYLE1" width="5%">
                    @* 职位名称 *@
                    @Html.LabelFor(e=>e.MajorName)
                </td>
                <td class="TD_STYLE2" width="200px">
                    @Html.DropDownListFor(e=>e.MajorId,ViewBag.cm as IEnumerable<SelectListItem>,new{@class="form-control"})
                    <span id="MajorIdError" style="color:red;display:none">请选择职位名称</span>
                </td>
                <td class="TD_STYLE1">
                    招聘人数
                </td>
                <td class="TD_STYLE2">
                    <input type="text" name="HumanAmount" id="HumanAmount" class="form-control">
                    <span id="HumanAmountError" style="color:red;display:none">请输入招聘人数</span>
                </td>
                <td class="TD_STYLE1">
                    截止日期
                </td>
                <td class="TD_STYLE2">
                    <el-date-picker v-model="value2"
                                    type="date" name="Deadline"
                                    placeholder="选择截止日期">
                    </el-date-picker>
                    @* <input type="text" name="Deadline" class="INPUT_STYLE2" id="Deadline"> *@
                    <span id="DeadlineError" style="color:red;display:none">请选择截止日期</span>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    登记人
                </td>
                <td class="TD_STYLE2">
                    <input type="text" name="Register" value="@ViewBag.uname" class="INPUT_STYLE2 form-control" readonly>
                </td>
                <td class="TD_STYLE1">
                    登记时间
                </td>
                <td class="TD_STYLE2">
                    <el-date-picker v-model="value1"
                                    type="date" name="RegistTime"
                                    placeholder="选择登记日期">
                    </el-date-picker>
                    <span id="RegistTimeError" style="color:red;display:none">请选择登记时间</span>
                </td>
                <td>&nbsp; </td>
                <td>&nbsp; </td>
                <td>&nbsp; </td>
                <td>&nbsp; </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    职位描述
                </td>
                <td class="TD_STYLE2" colspan="8">
                    <textarea name="MajorDescribe" id="MajorDescribe" rows="4" cols="80" class="form-control"></textarea>
                    <span id="MajorDescribeError" style="color:red;display:none">请输入职位描述</span>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    招聘要求
                </td>
                <td class="TD_STYLE2" colspan="8">
                    <textarea name="EngageRequired" id="EngageRequired" rows="4" cols="80" class="form-control"></textarea>
                    <span id="EngageRequiredError" style="color:red;display:none">请输入招聘要求</span>
                </td>
            </tr>
        </table>
    </form>
    <script type="text/javascript">
        function validateForm() {
            var isValid = true;

            // 验证职位分类是否选择
            if (document.getElementById("emrAdd").elements["FirstKindId"].value.trim() === "") {
                document.getElementById("FirstKindIdError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("FirstKindIdError").style.display = "none";
            }

            // 验证招聘类型是否选择
            if (document.getElementById("EngageType").value.trim() === "") {
                document.getElementById("EngageTypeError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("EngageTypeError").style.display = "none";
            }

            // 验证职位名称是否选择
            if (document.getElementById("emrAdd").elements["MajorId"].value.trim() === "") {
                document.getElementById("MajorIdError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("MajorIdError").style.display = "none";
            }

            // 验证职位分类是否选择
            if (document.getElementById("emrAdd").elements["MajorKindId"].value.trim() === "") {
                document.getElementById("MajorKindIdError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("MajorKindIdError").style.display = "none";
            }

            // 验证招聘人数是否输入
            if (document.getElementById("HumanAmount").value.trim() === "") {
                document.getElementById("HumanAmountError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("HumanAmountError").style.display = "none";
            }

            // 验证截止日期是否选择
            if (document.getElementById("emrAdd").elements["Deadline"].value.trim() === "") {
                document.getElementById("DeadlineError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("DeadlineError").style.display = "none";
            }

            // 验证登记时间是否选择
            if (document.getElementById("emrAdd").elements["RegistTime"].value.trim() === "") {
                document.getElementById("RegistTimeError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("RegistTimeError").style.display = "none";
            }

            // 验证职位描述是否输入
            if (document.getElementById("MajorDescribe").value.trim() === "") {
                document.getElementById("MajorDescribeError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("MajorDescribeError").style.display = "none";
            }

            // 验证招聘要求是否输入
            if (document.getElementById("EngageRequired").value.trim() === "") {
                document.getElementById("EngageRequiredError").style.display = "inline";
                isValid = false;
            } else {
                document.getElementById("EngageRequiredError").style.display = "none";
            }

            if (isValid) {
                document.getElementById("emrAdd").submit();
            }
        }

        new Vue({
            el: '#emrAdd',
            data: {
                value: "",
                options: [],
                firstid: "",
                secondid: "",
                thirdid: "",
                value1: "",
                value2:""
            },
            methods: {
                fill() {
                    axios.get('/EMR/GetFirstKinds').then(res => {
                        this.options = res.data.map(item => {
                            return {
                                value: item.value,
                                label: item.label,
                                children: item.children
                            };
                        });
                    }).catch(err => {
                        console.log(err);
                    })
                },
                handleChange(value) {
                    if (value != null) {
                        this.firstid = value[0];
                        this.secondid = value[1];
                        this.thirdid = value[2];
                    }
                }
            },
            mounted: function () {
                this.fill();
            }
        })
    </script>
</body>
</html>